<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位置管理 - 家庭工具管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 h-full">
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
        <!-- 顶部导航栏 -->
        <div class="bg-white shadow-sm">
            <div class="flex items-center justify-between px-4 py-3">
                <button onclick="window.parent.navigateTo('home.html')" class="p-1 text-gray-500">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h1 class="text-lg font-medium text-dark">位置管理</h1>
                <button class="p-1 text-gray-500" id="addLocationBtn">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
        
        <!-- 搜索栏 -->
        <div class="bg-white p-3 border-b border-gray-100">
            <div class="relative">
                <input type="text" placeholder="搜索位置..." class="w-full bg-gray-100 rounded-lg py-2 pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </div>
        
        <!-- 位置列表 -->
        <div class="flex-1 overflow-y-auto">
            <div class="p-4">
                <p class="text-sm text-gray-500 mb-3">位置列表</p>
                
                <!-- 一级位置 -->
                <div class="space-y-3">
                    <!-- 车库 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4 cursor-pointer location-item" data-location-id="1">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-warehouse text-green-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">车库</h3>
                                    <p class="text-xs text-gray-500">3个工具存放在此</p>
                                </div>
                            </div>
                            <i class="fa fa-chevron-down text-gray-400 text-xs location-toggle"></i>
                        </div>
                        
                        <!-- 子位置 -->
                        <div class="location-children hidden border-t border-gray-100">
                            <div class="flex items-center justify-between p-3 pl-17 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer" data-location-id="4">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                                        <i class="fa fa-toolbox text-blue-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">工具箱</h4>
                                        <p class="text-xs text-gray-500">2个工具</p>
                                    </div>
                                </div>
                                <i class="fa fa-ellipsis-v text-gray-400 text-xs"></i>
                            </div>
                            <div class="flex items-center justify-between p-3 pl-17 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer" data-location-id="5">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
                                        <i class="fa fa-screwdriver text-purple-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">工具架</h4>
                                        <p class="text-xs text-gray-500">1个工具</p>
                                    </div>
                                </div>
                                <i class="fa fa-ellipsis-v text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 客厅 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4 cursor-pointer location-item" data-location-id="2">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-couch text-blue-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">客厅</h3>
                                    <p class="text-xs text-gray-500">2个工具存放在此</p>
                                </div>
                            </div>
                            <i class="fa fa-chevron-down text-gray-400 text-xs location-toggle"></i>
                        </div>
                        
                        <!-- 子位置 -->
                        <div class="location-children hidden border-t border-gray-100">
                            <div class="flex items-center justify-between p-3 pl-17 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer" data-location-id="6">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mr-2">
                                        <i class="fa fa-table text-amber-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">电视柜抽屉</h4>
                                        <p class="text-xs text-gray-500">2个工具</p>
                                    </div>
                                </div>
                                <i class="fa fa-ellipsis-v text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 阳台 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4 cursor-pointer location-item" data-location-id="3">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-leaf text-green-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">阳台</h3>
                                    <p class="text-xs text-gray-500">4个工具存放在此</p>
                                </div>
                            </div>
                            <i class="fa fa-chevron-down text-gray-400 text-xs location-toggle"></i>
                        </div>
                        
                        <!-- 子位置 -->
                        <div class="location-children hidden border-t border-gray-100">
                            <div class="flex items-center justify-between p-3 pl-17 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer" data-location-id="7">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
                                        <i class="fa fa-cabinet-filing text-indigo-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">储物柜</h4>
                                        <p class="text-xs text-gray-500">3个工具</p>
                                    </div>
                                </div>
                                <i class="fa fa-ellipsis-v text-gray-400 text-xs"></i>
                            </div>
                            <div class="flex items-center justify-between p-3 pl-17 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer" data-location-id="8">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center mr-2">
                                        <i class="fa fa-plant-wilt text-pink-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">园艺工具架</h4>
                                        <p class="text-xs text-gray-500">1个工具</p>
                                    </div>
                                </div>
                                <i class="fa fa-ellipsis-v text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 厨房 -->
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <div class="flex items-center justify-between p-4 cursor-pointer location-item" data-location-id="9">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-utensils text-red-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">厨房</h3>
                                    <p class="text-xs text-gray-500">5个工具存放在此</p>
                                </div>
                            </div>
                            <i class="fa fa-chevron-down text-gray-400 text-xs location-toggle"></i>
                        </div>
                        
                        <!-- 子位置 -->
                        <div class="location-children hidden border-t border-gray-100">
                            <div class="flex items-center justify-between p-3 pl-17 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer" data-location-id="10">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-2">
                                        <i class="fa fa-cabinet-kitchen text-orange-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">橱柜</h4>
                                        <p class="text-xs text-gray-500">3个工具</p>
                                    </div>
                                </div>
                                <i class="fa fa-ellipsis-v text-gray-400 text-xs"></i>
                            </div>
                            <div class="flex items-center justify-between p-3 pl-17 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer" data-location-id="11">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
                                        <i class="fa fa-drawer text-yellow-600 text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium">抽屉</h4>
                                        <p class="text-xs text-gray-500">2个工具</p>
                                    </div>
                                </div>
                                <i class="fa fa-ellipsis-v text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加位置的模态框 -->
    <div id="addLocationModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg w-5/6 max-w-sm p-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">添加新位置</h3>
                <button id="closeModalBtn" class="text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="addLocationForm">
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">位置名称</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入位置名称">
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">上级位置</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="0">无上级位置</option>
                        <option value="1">车库</option>
                        <option value="2">客厅</option>
                        <option value="3">阳台</option>
                        <option value="9">厨房</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入位置描述（可选）" rows="2"></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">添加照片</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:bg-gray-50 transition-colors cursor-pointer">
                        <i class="fa fa-camera text-gray-400 text-2xl mb-2"></i>
                        <p class="text-sm text-gray-500">点击上传照片（可选）</p>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <button type="button" id="cancelAddBtn" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化位置展开/折叠功能
            initLocationToggle();
            
            // 初始化模态框功能
            initModal();
            
            // 为搜索框添加事件监听
            document.querySelector('input[placeholder="搜索位置..."]').addEventListener('input', function(e) {
                searchLocations(e.target.value);
            });
            
            // 为位置项添加点击事件
            document.querySelectorAll('.location-item, .location-children > div').forEach(item => {
                item.addEventListener('click', function() {
                    const locationId = this.getAttribute('data-location-id');
                    const locationName = this.querySelector('h3, h4').textContent;
                    // 这里可以打开位置详情或进行其他操作
                    alert(`查看位置：${locationName} (ID: ${locationId})`);
                });
            });
        });
        
        // 初始化位置展开/折叠功能
        function initLocationToggle() {
            const toggleIcons = document.querySelectorAll('.location-toggle');
            toggleIcons.forEach(icon => {
                // 阻止事件冒泡到父元素
                icon.parentElement.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const parent = this.closest('.bg-white.rounded-lg');
                    const childrenDiv = parent.querySelector('.location-children');
                    
                    // 切换显示/隐藏
                    if (childrenDiv.classList.contains('hidden')) {
                        childrenDiv.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                    } else {
                        childrenDiv.classList.add('hidden');
                        icon.classList.remove('fa-chevron-up');
                        icon.classList.add('fa-chevron-down');
                    }
                }, true);
            });
        }
        
        // 初始化模态框功能
        function initModal() {
            const modal = document.getElementById('addLocationModal');
            const addBtn = document.getElementById('addLocationBtn');
            const closeBtn = document.getElementById('closeModalBtn');
            const cancelBtn = document.getElementById('cancelAddBtn');
            const form = document.getElementById('addLocationForm');
            
            // 打开模态框
            addBtn.addEventListener('click', function() {
                modal.classList.remove('hidden');
                // 添加淡入动画
                setTimeout(() => {
                    modal.querySelector('.bg-white').classList.add('scale-100');
                    modal.querySelector('.bg-white').classList.remove('scale-95', 'opacity-0');
                }, 10);
            });
            
            // 关闭模态框的函数
            function closeModal() {
                modal.querySelector('.bg-white').classList.remove('scale-100');
                modal.querySelector('.bg-white').classList.add('scale-95', 'opacity-0');
                setTimeout(() => {
                    modal.classList.add('hidden');
                }, 200);
            }
            
            // 关闭模态框
            closeBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);
            
            // 点击模态框外部关闭
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            });
            
            // 表单提交
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                // 收集表单数据
                const locationName = form.querySelector('input[type="text"]').value;
                const parentLocation = form.querySelector('select').value;
                const description = form.querySelector('textarea').value;
                
                if (!locationName.trim()) {
                    alert('请输入位置名称');
                    return;
                }
                
                // 模拟添加位置
                alert(`成功添加位置：${locationName}`);
                closeModal();
                
                // 重置表单
                form.reset();
            });
        }
        
        // 搜索位置函数
        function searchLocations(keyword) {
            const locationItems = document.querySelectorAll('.space-y-3 > div');
            
            if (!keyword.trim()) {
                // 如果搜索框为空，显示所有位置
                locationItems.forEach(item => {
                    item.style.display = 'block';
                });
                return;
            }
            
            // 过滤位置
            locationItems.forEach(item => {
                const locationName = item.querySelector('h3').textContent.toLowerCase();
                const isVisible = locationName.includes(keyword.toLowerCase());
                item.style.display = isVisible ? 'block' : 'none';
            });
        }
    </script>
</body>
</html>